<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>订单列表</title>
		<link type="text/css" rel="stylesheet" href="/fontsawesome/css/font-awesome.css"/>
		<link type="text/css" rel="stylesheet" href="/css/datepicker.css"/>
		<link type="text/css" rel="stylesheet" href="/css/style.css"/>
		<style>
			/** 分页页面*/
			.page-bar {
				width: 100%;
				position:relative;
				/*margin-top:10px;*/
			}
			.page-num-ul li {
				float:left;
			}
			.page-num-ul li a {
				display:inline-block;
				padding:3px 5px;
				margin:0px 3px;
				border:1px solid #b8b8b8;
			}
			.page-num-ul a:hover,.page-num-ul .thisclass {
				border:1px solid #c5063f;
				background-color:#c5063f;
				color:#FFF;
				text-decoration:none;
			}
            .page-go-form{
                /*width: 300px;*/
                position:absolute;
                display:inline-block;
                right:50px;
                top:0px;
            }
            .page-go-form input,label,button {
                display:inline-block;
                margin:0px 5px;
            }
            .page-go-form .page-key {
				display:inline-block;
				width:20px;
                hight:20px
			}
            .page-go-form .page-btn {
				border:1px solid #b8b8b8;
				background-color:#fff3f8;
				display:inline-block;
				width:52px;
				height:20px;
				line-height:20px;
				cursor:pointer;
				font-weight: 400;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			<h2><span></span>订单列表</h2>
			<form action="#" method="post" id="order_shform">
				<div class="search_box clearfix">
					<input type="text" class="f_left" name="order_code" placeholder="输入订单号查询" style="margin-right:15px;"/>
					<label class="f_left">开始日期：</label>
					<div class="date_box">
						<input type="text" name="start" id="start_date" />
						<i class="fa fa-calendar"></i>
					</div>
					<label class="f_left">结束日期：</label>
					<div class="date_box">
						<input type="text" name="end" id="end_date" />
						<i class="fa fa-calendar"></i>
					</div>
					<input type="button" value="搜索" class="btn blue_btn search"/>
				</div>
			</form>
			<div class="cont_box">
				<table border="0" cellspacing="0" cellpadding="0" class="table">
					<thead>
						<tr>
							<th>序号</th>
							<th>订单号</th>
							<th>金额（￥）</th>
							<th>下单时间</th>
							<th width="200">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<!--javascript include-->
		<script src="/js/jquery-2.2.1.min.js"></script>
		<script src="/js/jquery.dataTables.min.js"></script>
		<script src="/js/bootstrap-datepicker.js"></script>
		<script src="/js/jquery.validate.min.js"></script>
		<script src="/js/other.js"></script>
		<script src="/js/pageQuery.js"></script>
		<script>
			$(function(){
				$("body").other({tableId:"#table_box",tableWrap:[0,1,2,3,4,7,8],tableAas:[6,"desc"]});
				$("body").tipWindow({
					method:"edit",
					type:"form",
					Class:".detail_btn",
					even:"click",
					orderId:"orderId",
					tipTit:"订单详情",
					Twidth:"800",Theight:"600",
					editUrl:"/sales/orderDetail/page"
				});//editUrl 编辑请求地址
				//订单搜索
				$(".search").click(function(){
					var data = {
						"startTime":$("#order_shform").find("input[name='start']").val(),
						"endTime":$("#order_shform").find("input[name='end']").val(),
						"orderId":$("#order_shform").find("input[name='order_code']").val().trim()
					};
					//表单验证
					if(data.orderId !=""){
						var reg1 = /^(\d)*$/;
						if(!reg1 .test(data.orderId)){
							alert("订单号只能为数字,且数字中间不能有空格");
							return;
						}else if(data.orderId.length > 14){
							alert("请输入14位订单号");
							return;
						}
					}
					if(data.endTime != ""&&data.startTime == ""|| (data.endTime == ""&&data.startTime != "")){
						alert("开始时间与结束时间不能只输入一个！");
						return;
					}
					//跳转
					cutPageQuery(data);
				});
			});
		</script>
	</body>
</html>
